<template>
  <div>
    <n-form
      ref="formRef"
      inline
      :label-width="80"
      label-placement="left"
      :model="query"
    >
      <n-form-item label="菜单名称">
        <n-input v-model:value="query.title" placeholder="请输入菜单名称" />
      </n-form-item>
      <n-form-item label="菜单名称">
        <n-input v-model:value="query.title" placeholder="请输入菜单名称" />
      </n-form-item>
      <n-form-item label="菜单名称">
        <n-input v-model:value="query.title" placeholder="请输入菜单名称" />
      </n-form-item>
      <n-form-item label="菜单名称">
        <n-input v-model:value="query.title" placeholder="请输入菜单名称" />
      </n-form-item>

      <n-form-item>
        <n-button type="primary" @click="handleSearch">查询</n-button>
        <n-button>重置</n-button>
      </n-form-item>
    </n-form>
    <n-data-table
      :columns="columns"
      :data="treeData"
      :pagination="false"
      :bordered="false"
    />
  </div>
</template>
<script lang="tsx" setup>
import { useSysMenuApi } from '@/api/system/menu';
import { NButton } from 'naive-ui';

defineOptions({ name: 'SystemMenu' });
const query = ref({
  title: '',
});

const treeData = ref([]);
const columns = ref([
  {
    title: '菜单标题',
    key: 'title',
  },
  {
    title: '菜单名称',
    key: 'name',
  },
  {
    title: '菜单地址',
    key: 'url',
  },
  {
    title: '操作',
    key: 'url',
    render: (row, index) => {
      return <n-button onClick={() => handleEdit(row)}>编辑</n-button>;
    },
  },
]);
const handleEdit = (row) => {
  console.log('row', row);
};
const handleSearch = () => {
  console.log('开始查询');
  useSysMenuApi.tree(query.value).then((res) => {
    console.log('菜单树', res.data);
    treeData.value = res.data;
  });
};

onBeforeMount(() => {
  handleSearch();
});
</script>
<style lang="scss"></style>
